<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平导航菜单</title>
    <style>

        *{
            margin:0;
            padding:0;
        }
        .div-big{
            width: 856px;
            height: 40px;
            border:1px solid #e9e9e9;
            position:absolute;
            top:50%;
            left:50%;
            margin-left:-428px;
            margin-top:-20px;
        }

        .div-big span{
          color: #333;
          display: inline-block;
          padding: 12px 33px;
          cursor: pointer;
          font-size:14px;
        }

        .tupian{
            background-image:url(img/pl.png);
            height: 30px;
            width: 23px;
            background-repeat: no-repeat;
            background-position: -12px 13px;
            display:inline-block;
            position: absolute;
            top: -1px;
            left: 11px;
        }

        .guanzhu{
            margin-left:1px;
        }
       
        .div-big span:hover{
            background-color: #9a9da2 !important;
            color: #fff;
        }
        div.div-big:hover .tupian{
            background-image:url(img/pl.png);
            height: 26px;
            width: 23px;
            background-repeat: no-repeat;
            background-position: -139px -1px;
            display: inline-block;
            position: absolute;
            top: 13px;
            left: 11px;
            z-index: 50;
       }

    </style>
</head>
<body>
      <div class="div-big">
          <div class="tupian"></div>
          <span class="guanzhu">我的关注</span>
          <span>推荐</span>
          <span>导航</span>
          <span>视频</span>
          <span>购物</span>
      </div>
</body>
</html>